.file_container {
    display: flex;
    flex-direction: column;
    .file_tools {
        height: 50px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #f0f0f0;
        background-color: #f0f0f0;
        border-radius: 5px;
        box-shadow: 0 3px 6px -4px rgba(0,0,0,0.12);
        .file_path_area {
            display: flex;
            flex-direction: row;
            .path_title {
                margin-left: 15px;
            }
            .path_list {
                display: flex;
                flex-direction: row;
                .path_item {

                }
                .path_item:not(:last-child):after {
                    content: "/";
                    margin: auto 5px;
                }
                .path_item:hover {
                    color: #0bc6f6;
                }
            }
        }
        .file_tools_btn {
            margin-right: 10px;
            display: flex;
            flex-direction: row;
            align-items: center;
            .btn_file {
                padding: 8px 10px;
                border-radius: 5px;
                margin: auto 5px;
                font-size: 0.8rem;
                input {
                    margin-right: 5px;
                    border: 1px solid #f0f0f0;
                }
            }
            .btn_danger {
                color: #fff;
                background: #F56C6C;
                border-color: #F56C6C;
                text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
            }
            .btn_primary {
                color: #fff;
                background: #409EFF;
                border-color: #409EFF;
                text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
            }
        }
    }

    .file_main {
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        height: calc(100vh - 195px);
        width: 100%;
        margin-top: 15px;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
        .folder_area {
            width: 70px;
            height: 100px;
            margin: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .folder_img {
                width: 60px;
                height: 60px;
            }
            .folder_title {
                padding: 0 5px;
                font-size: 0.8rem;
                width: 80px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
        .folder_area:last-child {
            margin-right: auto;
        }
    }

}